<template>
	<div :data-theme="theme" class="store-home productSort" :style="{ 'background-image': `linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.9) 100%),url(${merchantInfo.backImage})` }">
		<!-- <tui-skeleton v-if="skeletonShow"></tui-skeleton> -->
		<!-- <view class="fixed-top">
			<uni-nav-bar background-color="transparent" color="#333" :border='false' @clickLeft='returns' @clickRight="open">
				<view class="header">
					<view class="input" @click="search()">
						<text class="iconfont icon-sousuo"></text>
						<text class="place">search</text>
					</view>
				</view>
				<view slot="left" class="iconfont icon-dingbufanhui"></view>
				<view slot="right" class="iconfont icon-more"></view>
			</uni-nav-bar>
		</view> -->
		<u-navbar bgColor='transparent' @rightClick="open" :autoBack="true" :placeholder="true">
			<template #center>
				<view class="header"
					:style="{
						flex:1,
						marginLeft:'80rpx',
						marginRight:'80rpx',
						paddingRight:paddingRight +'px'
					}"
				>
					<view class="input" @click="search()">
						<text class="iconfont icon-sousuo"></text>
						<text class="place">search</text>
					</view>
				</view> 
			</template>
			<template #right>
				<view  style="color: #fff;" class="iconfont icon-more"></view>
			</template>
			
		</u-navbar>
		
		<view v-show="navShow && tabActive === 0" class="nav acea-row" style="justify-content: space-between;">
			<view class="nav-cont">
				<view :class="{ active: navActive === 0 }" class="item" @click='set_where(1)'>
					<view class="cont">
						{{ $t(`page.goodsList.default`) }}
					</view>
				</view>
				<view :class="{ active: navActive === 1 }" class="item" @click="set_where(2)">
					<view class="cont">
						{{$t(`page.goodsList.price`)}}
						<image v-if="price==1" src='../../../static/images/up.png'></image>
						<image v-else-if="price==2" src='../../../static/images/down.png'></image>
						<image v-else src='../../../static/images/horn.png'></image>
					</view>
				</view>
				<view :class="{ active: navActive === 2 }" class="item" @click="set_where(3)">
					<view class="cont">
						{{$t(`page.goodsList.sales`)}}
						<image v-if="stock==1" src='../../../static/images/up.png'></image>
						<image v-else-if="stock==2" src='../../../static/images/down.png'></image>
						<image v-else src='../../../static/images/horn.png'></image>
					</view>
				</view>
			</view>
			<view :class="{ active: navActive === 3 }" class="item" @click="navActive = 3;isColumn = !isColumn">
				<view class="cont">
					<text :class="['layout-icon', 'iconfont', isColumn ? 'icon-yangshi1' : 'icon-yangshi2']"></text>
				</view>
			</view>
		</view>
		
		<scroll-view class="main" scroll-y="true" @scroll="scrollHome">
			<merHome :merchantInfo="merchantInfo" :merid="merid" type="detail"></merHome>
			<view v-show="!navShow && tabActive === 0" class="nav acea-row"  style="justify-content: space-between;">
				<view class="nav-cont">
					<view :class="{ active: navActive === 0 }" class="item" @click='set_where(1)'>
						<view class="cont tui-skeleton-rect">
							{{ $t(`page.goodsList.default`) }}
						</view>
					</view>
					<view :class="{ active: navActive === 1 }" class="item" @click="set_where(2)">
						<view class="cont tui-skeleton-rect">
							{{$t(`page.goodsList.price`)}}
							<image v-if="price==1" src='../../../static/images/up.png'></image>
							<image v-else-if="price==2" src='../../../static/images/down.png'></image>
							<image v-else src='../../../static/images/horn.png'></image>
						</view>
					</view>
					<view :class="{ active: navActive === 2 }" class="item" @click="set_where(3)">
						<view class="cont tui-skeleton-rect">
							{{$t(`page.goodsList.sales`)}}
							<image v-if="stock==1" src='../../../static/images/up.png'></image>
							<image v-else-if="stock==2" src='../../../static/images/down.png'></image>
							<image v-else src='../../../static/images/horn.png'></image>
						</view>
					</view>
				</view>
				<view :class="{ active: navActive === 3 }" class="item" @click="navActive = 3;isColumn = !isColumn">
					<view class="cont tui-skeleton-rect">
						<text :class="['layout-icon', 'iconfont', isColumn ? 'icon-yangshi1' : 'icon-yangshi2']"></text>
					</view>
				</view>
			</view>
			<view class="tab-cont">
				<!-- 商品 -->
				<view  v-show="tabActive === 0" class="productList">
					<view  v-if="productList.length" id="goods" @touchmove="onTouchmove">
						<view v-if="!isColumn" class='list acea-row row-between-wrapper' :class='isColumn==true?"":"on"'>
							<view class='item' :class='isColumn==true?"":"on"' hover-class='none'
								v-for="(item,index) in productList" :key="index" @click="godDetail(item)">
								<view class='pictrue' :class='isColumn==true?"":"on"'>
									<easy-loadimage mode="widthFix" :image-src="item.image" ></easy-loadimage>
								</view>
								<view class='text' :class='isColumn==true?"":"on"'>
									<view class='name line3'>{{item.storeName}}</view>
									<!-- <view v-if="!isColumn" class='couponActivity'>$500</view> -->
									<view class='money acea-row row-between-wrapper' :class='isColumn==true?"":"on"'>
										<text class='num'><statistic :value="item.price" :currency="item.currency"/></text>
										<view class="sold">{{ (Math.floor(item.sales) + Math.floor(item.ficti)) || 0 }} {{$t(`message.tips.sold`)}}</view>
									</view>
								</view>
							</view>
						</view>
						<view v-else class="goods">
							<WaterfallsFlow :wfList='productList' @itemTap="godDetail" :type="1" :isStore="1"/>
						</view>
					</view>
					<view class='loadingicon acea-row row-center-wrapper' >
						<text class='loading iconfont icon-jiazai' :hidden='goodsLoading==false'></text>{{loadTitle}}
					</view>
								
				</view>
				<!-- 分类 -->
				<view v-show="tabActive === 1">
					<view class="category">
						<view v-for="item in category" :key="item.id" class="section">
							<view class="head" @click="goCategoryGoods(item.id)">
								<view class="title">{{ item.name }}</view>
								<view class="iconfont icon-xiangyou"></view>
							</view>
							<view v-if="item.childList" class="body">
								<view v-for="value in item.childList" :key="value.id" class="item" @click="goCategoryGoods(value.id)">{{ value.name }}</view>
							</view>
						</view>
					</view>
					<view :hidden="!categoryLoading" class="acea-row row-center-wrapper loadingicon">
						<text class="iconfont icon-jiazai loading"></text>{{loadTitle}}
					</view>
				</view>
				
				<!-- 优惠券 -->
				<view v-show="tabActive === 2" class="couponBox">
					<view class="acea-row row-around navCoupon">
						<template>
							<view v-for="(item,index) in navList" :key="index" :class="['acea-row', 'row-middle', type === item.type ? 'on' : '']" > 
								<text @click="setType(item.type)">{{$t(`page.users.userCoupon.navList[${index}].name`)}}</text>
							</view>
						</template>
					</view>
					<view v-if="couponsList.length" class="coupon coupon-list">
							<view v-for="item in couponsList" :key="item.id" class="item">
								<!-- :class="{gary:item.isUse}" -->
								<view class="left main_bg" >
									<view class="money">
										<text><statistic :value="item.money" :currency="item.currency"/></text>
										<view class="pic-num" v-if="parseFloat(item.minPrice)>0"><statistic :value="item.minPrice" :currency="item.currency"/> {{$t(`page.users.userCoupon.min`)}}</view>
									</view>
								</view>
								<view class="right">
									<view class="name">
										<text :class="{gary:item.isUse}">{{item.useType===1?$t(`page.users.userCoupon.navList[0].name`):$t(`page.users.userCoupon.navList[1].name`)}}</text>
									
										{{ item.name }}
									</view>
									<view class="time-wrap" style="justify-content: space-between;">
										<block v-if="item.isFixedTime">
											<view class="time">{{ $filters.dateFormat(item.useStartTimeStr) }}-{{ $filters.dateFormat(item.useEndTimeStr) }}</view>
										</block>
										<block v-else>
											<view>{{$t(`page.users.userCoupon.receivedInfo`)+ item.day+ $t(`page.users.userCoupon.receivedInfo1`)}}</view>
										</block>
										<block v-if="item.isUse">
											<view class="button gary">{{$t(`page.users.userCoupon.received`)}}</view>
										</block>
										<block v-else>
											<view class="button" @click="receiveCoupon(item)">{{$t(`page.users.userCoupon.receive`)}}</view>
										</block>
									</view>
								</view>
							</view>
					</view>
					<view class='loadingicon acea-row row-center-wrapper'>
					     <text class='loading iconfont icon-jiazai' :hidden='loadingcoupon==false'></text>{{couponsList.length?loadTitle:''}}
					  </view>
					<emptyPage v-if="couponsList.length == 0 && !loadingcoupon" title="暂无优惠券~"></emptyPage>
				</view>
			</view>
		</scroll-view>
				
		<view class="footer">
			<view v-for="(item, index) in tabs" :key="index" :class="{ active: tabActive === index }" class="item" @click="tab(index)">
				<view :class="['iconfont', item.icon]"></view>
				<view>{{ item.name }}</view>
			</view>
		</view>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
	</div>
</template>

<script>
	import { getMerCategoryApi, getMerDetailApi, getMerCollectAddApi, getMerCollectCancelApi, getMerIndexInfoApi, getMerProListApi } from '@/api/merchant.js';
	import tuiSticky from "@/components/tui-sticky/tui-sticky"
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
	import { mapState } from 'pinia'
	import {getCoupons, setCouponReceive} from '@/api/api.js';
	import {toLogin} from '@/libs/login.js';
	import emptyPage from '@/components/emptyPage.vue'
	import merHome from '@/components/merHome/index.vue'
	import {
		goShopDetail
	} from '@/libs/order.js'
	import {chatConfig} from '@/utils/consumerType.js'
	import { useAppStore } from '@/stores/app'
	const appStore = useAppStore()
	import statistic from '@/components/statistic'
	export default {
		components:{
			tuiSticky,
			WaterfallsFlow,
			emptyPage,
			merHome,
			statistic
		},
		computed: {
		  ...mapState(useAppStore,["merchantClassify", "merchantType", 'isLogin', 'uid']),
		},
		// 滚动监听
		onPageScroll(e) {
		   // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		   uni.$emit('scroll');
		},
		data() {
			return {
				navList: [{
						type: 1,
						name: '商家券',
						count: 0
					},
					{
						type: 2,
						name: '商品券',
						count: 0
					}
				],
				type: 1,
				mer_banner: './static/images/store.png',
				couponsList:[],
				loadTitle: this.$t(`page.goodsList.more`),
				categoryLoading: false,
				category: [],
				// 底部菜单
				tabs: [{
						icon: 'icon-yizhan_o',
						name: this.$t(`page.store.index`),
					},
					{
						icon: 'icon-yingyongAPP_o',
						name: this.$t(`page.store.classify`)
					},
					{
						icon: 'icon-huobiliu_o',
						name: this.$t(`page.store.collar`)
					},
					{
						icon: 'icon-kefu_o',
						name: this.$t(`page.store.call`)
					}
				],
				productList:[],
				scrollTop: 0,
				merchantInfo:{},
				sortPrice:'',
				skeletonShow: true, //骨架屏显示隐藏
				rightDrawer: false,
				navShow: false,
				navActive: 0,
				tabActive: 0, // 底部切换
				isColumn: true, // 商品列表排列方式
				stock: 0,
				merid: 0,
				price: 0,
				where: {
					keyword: '',
					priceOrder: '',
					salesOrder: '',
					page: 1,
					limit: 20,
					cid: 0,
					merId: 0
				},
				loading: false,
				loadend: false,
				goodsLoading: false,
				loadendcoupon: false,
				loadingcoupon: false,
				page: 1,
				limit: 10,
				theme:'theme3',
				paddingRight:0,
			}
		},
		watch: {
			tabActive: function(value, old) {
				switch (value) {
					case 0:
						this.getGoods();
						break;
					case 1:
						if(this.service_open){
							this.get_service_list();
						}
						break;		
					case 2:
						this.getCoupon();
						break;
				}
			}
			
		},
		onLoad(options) {
			this.merid = parseInt(options.id)
		},
		mounted: function() {
			appStore.MerTypeList()
			
			this.getMerIndexInfo();
			this.getGoods();
			this.getMerCategory();
			
			// #ifdef MP-WEIXIN
			this.paddingRight = uni.getMenuButtonBoundingClientRect().width
			// #endif
		},
		methods:{
			// 领取优惠券
			receiveCoupon(item) {
				let that = this;
				if (that.isLogin === false) {
			        toLogin();
				} else {
					uni.showLoading({
					   title: this.$t(`message.tips.loding`)
				    });

					setCouponReceive(item.id).then(res => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						uni.hideLoading();
						item.isUse = !item.isUse
					}).catch(err => {
						uni.showToast({
							title: err,
							icon: 'none'
						})
						uni.hideLoading();
					})
				}
			},
			setType: function(type) {
				if (this.type !== type) {
					this.type = type;
					this.couponsList = [];
					this.page = 1;
					this.loadendcoupon = false;
					this.getCoupon();
				}
			},
			onTouchmove(e){
				if (this.loadend) return;
				if (this.loading) return;
				if (this.goodsLoading) return;
				const query = uni.createSelectorQuery().in(this);
				query.select('#goods').boundingClientRect(data => {
					if(data.bottom < 1500 && data.top < 0) {
						this.getGoods();	
					}
				}).exec();
				// 模拟触底刷新
			},
			getMerIndexInfo() {
				let that = this;
				getMerIndexInfoApi(this.merid).then(res => {
					this.merchantInfo = res.data
					uni.setNavigationBarTitle({
						title: res.data.name
					})
					appStore.MERCHANTJINFO(res.data)
					this.skeletonShow = false;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = this.$t(`page.goodsList.more`);
					this.skeletonShow = false;
				});
			},
			getMerCategory() {
				getMerCategoryApi(this.merid).then(res => {
					this.category = res.data
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				});
			},
			goCategoryGoods(id){
				this.clear();
				this.where.cid = id;
				this.getGoods();
				this.tabActive = 0;
			},
			// 去详情页
			godDetail(item) {
				goShopDetail(item);
			},
			// 获取商铺优惠券
			getCoupon: function() {
				let that=this
				if(that.loadendcoupon) return false;
				if(that.loadingcoupon) return false;
				that.loadingcoupon = true;
				getCoupons({ page: that.page, limit: that.limit, useType: this.type,merId:this.merid }).then(res=>{
				    let list=res.data.list,loadend=list.length < that.limit;
				    let couponsList = that.$util.SplitArray(list, that.couponsList);
				    that.$set(that,'couponsList',couponsList);
					that.loadendcoupon = loadend;
					that.loadTitle = loadend ? this.$t('page.goodsList.no') : this.$t('page.goodsList.more');
					that.page = that.page + 1;
					that.loadingcoupon = false;
					that.isShow = true;
				}).catch(err=>{
					that.loadingcoupon = false;
					that.loadTitle = this.$t('page.goodsList.more');
				});
			},
			// 选择条件展示商品
			set_where: function(param) {
				this.clear();
				switch (param) {
					case 1:
						this.price = 0;
						this.stock = 0;
						this.navActive = 0;
						break;
					case 2:
						if (this.price == 0) this.price = 1;
						else if (this.price == 1) this.price = 2;
						else if (this.price == 2) this.price = 1;
						this.stock = 0;
						this.navActive = 1;
						break;
					case 3:
						if (this.stock == 0) this.stock = 1;
							else if (this.stock == 1) this.stock = 2;
							else if (this.stock == 2) this.stock = 1;
							this.price = 0
							this.navActive = 2;
						break;
					case 4:
						this.price = 0;
						this.stock = 0;
						this.navActive = 3;
						break;
				}
				this.getGoods();
			},
			clear(){
				this.loading = false;
				this.loadend = false;
				this.where = {
					keyword: '',
					priceOrder: '',
					salesOrder: '',
					page: 1,
					limit: 20,
					cid: 0
				};
				this.productList = [];
			},
			getGoods(){
				let that = this;
				if (that.loadend) return;
				if (that.goodsLoading) return;
				that.goodsLoading = true;
				this.where.merId = this.merid
				if (this.price == 0) this.where.priceOrder = '';
				else if (this.price == 1) this.where.priceOrder = 'asc';
				else if (this.price == 2) this.where.priceOrder = 'desc';
				if (this.stock == 0) this.where.salesOrder = '';
				else if (this.stock == 1) this.where.salesOrder = 'asc';
				else if (this.stock == 2) this.where.salesOrder = 'desc';
				that.loadTitle = '';
				getMerProListApi(that.where).then(res => {
					let list = res.data.list;
					let goodsList = that.$util.SplitArray(list, that.goods);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.goodsLoading = false;
					that.loadTitle = loadend ? this.$t('page.goodsList.no') : this.$t('page.goodsList.more');
					that.$set(that, 'productList', goodsList);
					that.$set(that.where, 'page', that.where.page + 1);
				}).catch(err => {
					that.goodsLoading = false;
					uni.showToast({
						title: err,
						icon: 'none'
					})
					setTimeout(function() {
						//uni.navigateBack()
					}, 1000);
				});
			},
			// 商铺底部切换
			tab: function(param) {
				this.tabActive = param;
				this.clear()
				if(param===3) chatConfig('mer');
			},
			stickyChange: function(e) {
				let index = e.index;
				this.lists[index].stickyTop = e.top;
			},
			// 商铺首页滚动 navbar 吸顶
			scrollHome: function(e) {
			
				uni.$emit('scroll');
				this.navShow = e.detail.scrollTop >= 50;
			},
			closeDrawer(){
				this.rightDrawer = false
			},
			open(){
				this.rightDrawer = true
			},
			search(){
				uni.navigateTo({
					url:'/pages/goods_list/index?merId='+this.merid
				})
			},
			returns() {
				uni.navigateBack()
			},
		},
		onReachBottom() {
			// 模拟触底刷新
			if(this.tabActive == 0){
				setTimeout(()=>{
					this.productList.push(...this.productList);
				},500)
			}
		},
		onPullDownRefresh(){
			// 模拟上拉刷新
			setTimeout(()=>{
				const newList = this.productList.reverse();
				this.productList = newList;
				uni.stopPullDownRefresh();
			},500)
		}
	}
</script>

<style lang="scss" scoped>
	.main_bg{
		@include main_bg_color(theme);
	}
	.select{
		@include main_color(theme);
		@include coupons_border_color(theme);
	}
	.sold{
		font-size: 26rpx;
		color: #888888;
	}
	.navCoupon {
		width: 100%;
		height: 106rpx;
		color: #999999;
		background-color: #fff;
	}
	
	.navCoupon .acea-row {
		border-top: 5rpx solid transparent;
		border-bottom: 5rpx solid transparent;
		cursor: pointer;
	}
	
	.navCoupon .acea-row.on {
		@include tab_border_bottom(theme);
		@include main_color(theme);
	}
	.tab-cont{
		min-height: 500rpx;
	}
	.couponBox{
		::v-deep .empty-box{
		    padding-top: 200rpx;
			margin-top: 0 !important;
		}
	}
	
	.main{
		flex: 1;
		min-height: 0rpx;
		 height:calc(100vh - var(--window-top));//calc()是动态计算函数
	}
	.font-bg-red{
		padding: 4rpx;
		@include main_bg_color(theme);
		color: #fff;
		font-size: 18rpx;
		display: inline-block;
		border-radius: 4rpx;
	}
	.goods{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-left: 30rpx;
		width: 100%;
	}
	.coupon {
		padding: 30rpx;
	
		.item {
			display: flex;
			margin-bottom: 16rpx;
	
			.left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 240rpx;
				font-weight: 500;
				font-size: 24rpx;
				line-height: 1;
				color: #FFFFFF;
	
				&.gary {
					background-image: url('');
				}
	
				.money {
					text {
						margin-left: 10rpx;
						font-size: 60rpx;
					}
				}
			}
	
			.right {
				flex: 1;
				min-width: 0;
				padding-right: 18rpx;
				padding-left: 27rpx;
				background-color: #FFFFFF;
	
				.name {
					padding-top: 32rpx;
					padding-bottom: 32rpx;
					border-bottom: 1rpx solid #F0F0F0;
					font-weight: 500;
					font-size: 30;
					line-height: 1;
					color: #282828;
	
					text {
						display: inline-block;
						height: 28rpx;
						border-radius: 14rpx;
						margin-right: 15rpx;
						background-color: #FFF4F3;
						font-weight: 500;
						font-size: 20rpx;
						line-height: 26rpx;
						text-align: center;
						padding: 0 6rpx;
						@include main_color(theme);
	                    @include coupons_border_color(theme);
						&.gary {
							border-color: #BBB;
							color: #bbb;
							background-color: #F5F5F5;
						}
					}
				}
	
				.time-wrap {
					display: flex;
					align-items: center;
					padding-top: 16rpx;
					padding-bottom: 16rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
	
					.time {
						flex: 1;
						min-width: 0;
					}
	
					.button {
						width: 136rpx;
						height: 44rpx;
						border-radius: 22rpx;
						@include main_bg_color(theme);
						font-weight: 500;
						font-size: 22rpx;
						line-height: 44rpx;
						text-align: center;
						color: #FFFFFF;
	
						&.gary {
							background-color: #999 !important;
						}
					}
				}
			}
		}
	   
		.disabled {
			.left {
				background-image: url(/static/images/coupon2.png);
			}
	
			.right {
				.name {
					text {
						border-color: #C1C1C1;
						color: #C1C1C1;
					}
				}
	
				.time-wrap {
					.button {
						background-color: #CCCCCC;
						color: #FFFFFF;
					}
				}
			}
		}
	}
	.category {
		padding-top: 34rpx;
		padding-right: 20rpx;
		padding-left: 20rpx;
	
		.section {
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			background-color: #FFFFFF;
	
			.head {
				position: relative;
				display: flex;
				align-items: center;
				height: 90rpx;
				padding-right: 20rpx;
				padding-left: 36rpx;
				font-weight: bold;
				color: #282828;
	
				&::before {
					content: " ";
					position: absolute;
					top: 50%;
					left: 20rpx;
					width: 6rpx;
					height: 24rpx;
					@include main_bg_color(theme);
					transform: translateY(-50%);
				}
	
				.title {
					flex: 1;
					min-width: 0;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 30rpx;
				}
	
				.iconfont {
					font-size: 22rpx;
					line-height: 1;
				}
			}
	
			.body {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				padding: 9rpx 36rpx 14rpx;
	
				.item {
					width: 314rpx;
					height: 84rpx;
					padding-right: 30rpx;
					padding-left: 30rpx;
					border-radius: 10rpx;
					background-color: #F5F5F5;
					margin-bottom: 10rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 500;
					font-size: 26rpx;
					line-height: 84rpx;
					color: #282828;
				}
			}
		}
	}
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		display: flex;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		opacity: 0.96;
	
		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-weight: 500;
			font-size: 20rpx;
			color: #282828;
	
			.iconfont {
				font-size: 43rpx;
			}
		}
	
		.active {
			@include main_color(theme);
		}
	}
	.productList {
		background: #f5f5f5;
		.list {
			padding: 30rpx;
		}
	}
	
	.productList .list.on {
		border-radius: 14rpx;
		margin-top: 0 !important;
		background-color: #fff;
		padding: 40rpx 0 0 0;
		
	}
	
	.productList .list .item {
		width: 335rpx;
		background-color: #fff;
		border-radius: 14rpx;
		margin-bottom: 20rpx;
	}
	.productList .list.item {
		&::before{
			content: " ";
			    position: absolute;
			    top: 0;
			    right: 10px;
			    left: 125px;
			    border-top: 0.5px solid #f5f5f5;
		}
	}
	.productList .list .item.on {
		width: 100%;
		display: flex;
		padding: 0 24rpx 50rpx 24rpx;
		margin: 0;
		border-radius: 14rpx;
	}
	
	.productList .list .item .pictrue {
		position: relative;
		width: 100%;
		height: 335rpx;
	}
	
	.productList .list .item .pictrue.on, .easy-loadimage,image,uni-image {
		width: 260rpx;
		height: 260rpx;
	}
	
	.productList .list .item .pictrue image.on {
		border-radius: 6rpx;
	}
	
	.productList .list .item .text.on {
		width: 456rpx;
		padding: 0 0 0 20rpx;
	}
	
	.productList .list .item .text .name {
		font-size: 28rpx;
		font-weight: bold;
		margin-top: 8rpx;
		color: #333333;
		margin-bottom: 30rpx;
	}
	
	.productList .list .item .text .money.on {
		margin-top: 50rpx;
	}
	
	.productList .list .item .text .money .num {
		font-size: 38rpx;
		font-weight: 900;
		@include price_color(theme);
	}
	.productList .list .item .text .y-money {
		font-size: 26rpx;
		color: #888888;
		text-decoration: line-through;
		margin-left: 14rpx;
	}
	
	.store-home-top{
		width: 100%;
		height: 360rpx;
		//background: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, #000000 40%, #000000 100%);
		position: relative;
	}
	.store-home{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		padding-bottom: 100rpx;
		background: left top/750rpx calc(var(--status-bar-height) + 360rpx) no-repeat fixed;
		overflow: hidden;
	}
	.fixed-top{
		// position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
	}
	.nav.fixed {
		position: fixed;
		left: 0;
		width: 100%;
	
		.nav-cont {
			position: absolute;
			width: 80%;
			justify-content: space-between;
		}
	}
	
	.nav {
		position: relative;
		padding: 0 30rpx;
		.nav-cont {
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 84rpx;
		}
		.item {
			// flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			min-width: 0;
			
			.cont {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 12rpx;
				height: 44rpx;
				border-radius: 22rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			
				.arrow-icon {
					margin-left: 10rpx;
					font-size: 18rpx;
				}
			
				.layout-icon {
					font-size: 32rpx;
				}
			
				.icon-pailie {
					font-size: 32rpx;
				}
			
				image {
					width: 15rpx;
					height: 21rpx;
					margin-left: 7rpx;
				}
			}
		}
			
		.active {
			.cont {
				background-color: #FFFFFF;
				font-weight: bold;
				@include main_color(theme);
			}
		}
	
		.select {
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 2;
			width: 100%;
			padding-right: 40rpx;
			padding-bottom: 28rpx;
			padding-left: 74rpx;
			border-bottom-right-radius: 24rpx;
			border-bottom-left-radius: 24rpx;
			background-color: #FFFFFF;
	
			.item {
				margin-top: 28rpx;
				font-size: 24rpx;
				color: #454545;
			}
	
			.active {
				//background: url(../../../static/images/active.png) right center/20rpx no-repeat;
				color: #E93323;
			}
		}
	}
	
	
	.icon-dingbufanhui, .icon-more{
		color: #fff;
	}
	.productSort .header .input {
		height: 60rpx;
		background-color: #3F4244;
		border-radius: 50rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
	}
	
	.productSort .header .input .iconfont {
		font-size: 26rpx;
		color: #666;
	}
	.productSort .header .input .place{
		padding-left: 12rpx;
		color: #ccc;
		font-size: 26rpx;
	}
</style>
